<!DOCTYPE html>

<html>
<script type="text/javascript" language="javascript">
    function temps(){
        if (document.formulari.SS.value != '')document.getElementById("progress").value=5;
        if (document.formulari.auto.value != '')document.getElementById("progress").value=10;
        if (document.formulari.contra.value != '')document.getElementById("progress").value=15;
        if (document.formulari.autoc.value != '')document.getElementById("progress").value=20;
        if (document.formulari.telf.value != '')document.getElementById("progress").value=25;
        if (document.formulari.url.value != '')document.getElementById("progress").value=30;
        if (document.formulari.correu.value != '')document.getElementById("progress").value=35;
        if (document.formulari.dataihora.value != '')document.getElementById("progress").value=40;
        if (document.formulari.data.value != '')document.getElementById("progress").value=45;
        if (document.formulari.mes.value != '')document.getElementById("progress").value=50;
        if (document.formulari.setmana.value != '')document.getElementById("progress").value=55;
        if (document.formulari.hora.value != '')document.getElementById("progress").value=60;
        if (document.formulari.num.value != '')document.getElementById("progress").value=65;
        if (document.formulari.rang.value != '')document.getElementById("progress").value=70;
        if (document.formulari.color.value != '')document.getElementById("progress").value=75;
        if (document.formulari.prov.value != '')document.getElementById("progress").value=80;
        if (document.formulari.salari.value != '')document.getElementById("progress").value=85;
        if (document.formulari.numero.value != '')document.getElementById("progress").value=90;
        if (document.formulari.fitxer.value != '')document.getElementById("progress").value=95;
        if (document.formulari.password.value != '')document.getElementById("progress").value=100;
     }
     function interval(){
        activa=setInterval("temps()",1000);
     }
</script>
<body onLoad="interval()">
<form name="formulari">
	<p>Camp required <input type="text" name="SS" required id="name"></p>
	<p>Autofocus: <input type="text" autofocus name="auto" id="auto"></p>
	<p>Ocult: <input type="password" autocomplete="off" name="contra" id="contra"></p>
	<p>Autocomplete: <input type="text" name="autoc" autocomplete="on"i d="autoc"></p>
	<p>Telèfon: <input type="tel" name="telf" id="telf"></p>
	<p>URL: <input type="url" name="url" id="url"></p>
	<p>Correu: <input type="email" name="correu" id="correu"></p>
	<p>Data i hora: <input type="datetime" name="dataihora" id="dataihora"></p>
	<p>Data: <input type="date" name="data" id="data"></p>
	<p>Mes: <input type="month" name="mes" id="mes"></p>
	<p>Setmana: <input type="week" name="setmana" id="setmana"></p>
	<p>Hora: <input type="time" name="hora" id="hora"></p>
	<p>Núm: <input type="number" name="num" min="0" max="50" id="num"></p>
	<p>Rang: <input type="range" name="rang" min="0" max="50" id="rang"></p>
	<p>Color: <input type="color" name="color" id="color"></p>
	<p>Provincies: <input list="provincies" name="prov" id="prov">
		<datalist id="provincies">
		  <option value="Barcelona">
		  <option value="Tarragona">
		  <option value="Lleida">
		  <option value="Girona">
	</datalist> </p>
	<p>Placeholder: <input type="text" name="salari" placeholder="1000" id="salari"></p>
	<p>Numero entre 0-10: <input type="number" name="numero" min="0" max="10" id="numero"></p>
	<p>Fitxer: <input type ="file" multiple="multiple" name="fitxer" id="fitxer"></p>
	<p>Password: <input type="password" minlenght="8" name="password" pattern="[0-9]{1}.{5,}.[A-Z]{1}" id="password"/></p>
	<p>Progres: <progress min="0" max="100" id="progress"></progress></p>
	<p><input type="submit" value="enviar" name="enviar" id="enviar" /></p>
</form>
</html>